<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item
						:label="`${$t('member.merchant_id')}:`"
						prop="merchantId"
						:rules="[
							{
								required: false,
								message: $t('member.please_select_a_merchant'),
								trigger: ['blur', 'change']
							}
						]"
					>
						<merchant-select
							v-model="queryData.merchantId"
							v-symbols
							:placeholder="$t('common.please_choose')"
							@change="selectMerchantHandle(merchantList)"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							:disabled="!queryData.merchantId"
							size="medium"
							@click="handleSearch"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							v-if="isZk && hasPermission('104014')"
							type="warning"
							:disabled="loading"
							size="medium"
							@click="openImgSettingDailog"
						>
							{{ $t('member.vip_icon_management') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div v-if="dataList.length" class="content">
				<el-form>
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						class="small-size-table"
						:data="dataList"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
					>
						<el-table-column
							align="center"
							:label="`${$t('common.vip_level')}`"
							prop="vipSerialNum"
							width="120"
						>
							<template slot-scope="scope">
								<span>
									{{ 'VIP' + scope.row.vipSerialNum || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="vipGradeName"
							width="120"
							align="center"
							:label="`${$t('member.vip_icon')}`"
						>
							<template slot-scope="scope">
								<el-link
									v-if="scope.row.imageAddress"
									type="primary"
									@click="openimgPreviewDialog(scope.row)"
								>
									{{ $t('common.click_show') }}
								</el-link>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column prop="totalDeposit" align="center">
							<template slot="header">
								{{ $t('member.upgrade_conditions') }}1
								<br />
								{{ $t('member.accumulated_deposits') }} ({{
									handleCurrency(currentCurrency, true)
								}}) ({{
									$t('member.including_substitute_charging')
								}}) ≥
							</template>
							<template slot-scope="scope">
								<span
									v-if="scope.row.vipSerialNum + '' !== '0'"
								>
									<el-input-number
										v-model.number="scope.row.totalDeposit"
										size="medium"
										:max="999999999999"
										:placeholder="$t('common.please_enter')"
										:precision="0"
										:min="0"
										style="width: auto"
										@blur="
											checkTransferValue(
												scope.row,
												'totalDeposit'
											)
										"
									></el-input-number>
								</span>
								<span v-else>{{ scope.row.totalDeposit }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="tatalValidWater" align="center">
							<template slot="header">
								{{ $t('member.upgrade_conditions') }}2
								<br />
								{{ $t('member.accumulated_effective_flow') }}
								({{ handleCurrency(currentCurrency, true) }}) ≥
							</template>
							<template slot-scope="scope">
								<span
									v-if="scope.row.vipSerialNum + '' !== '0'"
								>
									<el-input-number
										v-model="scope.row.tatalValidWater"
										size="medium"
										:max="999999999999"
										:precision="0"
										:min="0"
										:placeholder="$t('common.please_enter')"
										style="width: auto"
										@blur="
											checkTransferValue(
												scope.row,
												'tatalValidWater'
											)
										"
									></el-input-number>
								</span>
								<span v-else>
									{{ scope.row.relegationWater }}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="relegationWater" align="center">
							<template slot="header">
								{{ $t('member.grade_guaranteed_flow') }}

								({{ handleCurrency(currentCurrency, true) }}) ≥
							</template>
							<template slot-scope="scope">
								<span
									v-if="scope.row.vipSerialNum + '' !== '0'"
								>
									<el-input-number
										v-model="scope.row.relegationWater"
										size="medium"
										:max="999999999999"
										:precision="0"
										:min="0"
										:placeholder="$t('common.please_enter')"
										style="width: auto"
										@blur="
											checkTransferValue(
												scope.row,
												'relegationWater'
											)
										"
									></el-input-number>
								</span>

								<span v-else>
									{{ scope.row.relegationWater }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="relegationValidPeriod"
							align="center"
							:label="`${$t('member.period_of_validity')}`"
						>
							<template slot-scope="scope">
								<span
									v-if="scope.row.vipSerialNum + '' !== '0'"
								>
									<el-input-number
										v-model="
											scope.row.relegationValidPeriod
										"
										size="medium"
										:max="9999"
										:precision="0"
										:min="0"
										:placeholder="$t('common.please_enter')"
										style="width: auto"
										@blur="
											checkTransferValue(
												scope.row,
												'relegationValidPeriod'
											)
										"
									></el-input-number>
								</span>
								<span v-else>
									{{ scope.row.relegationValidPeriod }}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</el-form>
			</div>

			<div v-if="dataList.length" class="btn_footer">
				<el-button
					v-if="hasPermission('104012')"
					type="primary"
					icon="el-icon-search"
					size="medium"
					:disabled="loading"
					@click="saveData()"
				>
					{{ $t('common.save') }}
				</el-button>
				<el-button
					v-if="hasPermission('104013')"
					icon="el-icon-refresh-left"
					size="medium"
					@click="resetLastSaveData()"
				>
					{{ $t('member.restore_last_onfiguration') }}
				</el-button>
			</div>
		</div>
		<!-- 图片预览弹窗 -->
		<el-dialog
			:title="
				`VIP${imgPreviewDialog.vipSerialNum +
					$t('member.picture_preview')}`
			"
			:visible.sync="imgPreviewDialog.visible"
			:destroy-on-close="true"
			class="img-preview-dailog"
		>
			<div class="img-preview-content">
				<div class="img-item">
					<div>{{ $t('member.level_img_url') }}：</div>
					<el-image
						:src="imgPreviewDialog.levelImgUrl"
						:preview-src-list="[imgPreviewDialog.levelImgUrl]"
					></el-image>
				</div>
				<div class="img-item">
					<div>{{ $t('member.level_img_url') }}：</div>
					<el-image
						:src="imgPreviewDialog.levelImgDetailUrl"
						:preview-src-list="[imgPreviewDialog.levelImgDetailUrl]"
					></el-image>
				</div>
			</div>
		</el-dialog>
		<!-- VIP图标管理弹窗 -->
		<el-dialog
			:title="`${$t('member.vip_icon_management')}`"
			:visible.sync="vipImgSettingVisible"
			:destroy-on-close="true"
			width="750px"
		>
			<el-table
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					align="center"
					:label="`${$t('common.vip_level')}`"
					prop="vipSerialNum"
					width="120"
				>
					<template slot-scope="scope">
						<span>{{ 'VIP' + scope.row.vipSerialNum || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="vipGradeName"
					align="center"
					:label="`${$t('member.vip_icon')}`"
				>
					<template slot-scope="scope">
						<el-link
							v-if="scope.row.imageAddress"
							type="primary"
							@click="openimgPreviewDialog(scope.row)"
						>
							{{ $t('common.click_show') }}
						</el-link>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.actions')}`"
				>
					<template slot-scope="scope">
						<el-link
							type="primary"
							@click="openImgEditDialog(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- 等级图片编辑 -->
			<el-dialog
				:title="`${$t('member.picture_editing')}`"
				:visible.sync="imgEditDialog.visible"
				:destroy-on-close="true"
				append-to-body
			>
				<el-form
					ref="imgEditFormRef"
					:model="imgEditDialog"
					:rules="rules"
					label-width="100px"
				>
					<el-form-item
						:label="`${$t('member.level_img_url')}`"
						prop="imageAddress"
					>
						<UploadItem
							ref="imgUpload"
							:uploadAPI="uploadAPI"
							:upload-file-type="'image'"
							:platform="'PC'"
							:img-url="imgEditDialog.imageAddress"
							@upoladItemSucess="
								(file) =>
									handleUploadSucess(file, 'imageAddress')
							"
							@startUpoladItem="handleStartUpload"
							@deleteUpoladItem="
								(e) => handleDeleteUpload('imageAddress')
							"
							@upoladItemDefeat="
								(e) => handleUploadDefeat('imageAddress')
							"
						></UploadItem>
					</el-form-item>
					<el-form-item
						:label="`${$t('member.vip_icon_management')}`"
						prop="imageDetailAddress"
					>
						<UploadItem
							ref="imgUpload"
							:uploadAPI="uploadAPI"
							:upload-file-type="'image'"
							:platform="'PC'"
							:img-url="imgEditDialog.imageDetailAddress"
							@upoladItemSucess="
								(file) =>
									handleUploadSucess(
										file,
										'imageDetailAddress'
									)
							"
							@startUpoladItem="handleStartUpload"
							@deleteUpoladItem="
								(e) => handleDeleteUpload('imageDetailAddress')
							"
							@upoladItemDefeat="
								(e) => handleUploadDefeat('imageDetailAddress')
							"
						></UploadItem>
						<div class="remakeBox">
							<span class="danger">*</span>
							{{ $t('member.upload_pictures_tips') }}
						</div>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="imgEditDialog.visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="handleImgEdit">
						{{ $t('common.save') }}
					</el-button>
				</div>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'

import { routerNames } from '@/utils/consts'

export default {
	name: routerNames.vipLevelConfig,
	components: { UploadItem: () => import('@/components/UploadItem') },

	mixins: [list],
	data() {
		return {
			// merchantInfo: {},
			queryData: {
				merchantId: ''
			},
			dataList: [],
			merchantCurrency: [],
			loading: false,
			currentCurrency: '',
			vipImgSettingVisible: false,
			imgEditDialog: {
				visible: false,
				vipSerialNum: '',
				imageAddress: '',
				imageDetailAddress: ''
			},
			imgPreviewDialog: {
				visible: false,
				vipSerialNum: '',
				// VIP等级图标
				levelImgUrl: '',
				// VIP详情图标
				levelImgDetailUrl: ''
			}
		}
	},

	computed: {
		...mapGetters(['merchantInfo']),

		isZk() {
			return this.$store.getters.isZk
		},
		uploadAPI() {
			return this.$api.imageUpload
		},
		rules() {
			const imageDetailAddress = [
				{
					required: true,
					message: this.$t('common.please_upload_img'),
					trigger: 'change'
				}
			]
			const imageAddress = [
				{
					required: true,
					message: this.$t('common.please_upload_img'),
					trigger: 'change'
				}
			]
			return {
				imageAddress,
				imageDetailAddress
			}
		}
	},
	created() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.currentCurrency = this.$store.getters.merchantInfo.currency
		}
	},
	methods: {
		selectMerchantHandle(val) {
			this.merchantCurrency = val
		},
		handleSearch() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					for (let i = 0; i < this.merchantCurrency.length; i++) {
						const ele = this.merchantCurrency[i]
						if (this.queryData.merchantId === ele.id) {
							this.currentCurrency = ele.currency
						}
					}
					this.loadData()
				}
			})
		},
		checkTransferValue(row, type) {
			if (row.relegationValidPeriod < 10) {
				row.relegationValidPeriod = 11
			}
			if (!row[type]) {
				row[type] = 0
			}
		},
		loadData() {
			this.loading = true
			this.dataList = []
			this.$api
				.memberVipGradeSelectAPI({
					merchantId: this.queryData.merchantId
				})
				.then((res) => {
					this.loading = false
					this.dataList = res.data || []
				})
				.catch(() => {
					this.loading = false
				})
		},
		saveData() {
			this.loading = true
			const listUpdateMemberVipGradeReqDto = this.dataList.map((item) => {
				return {
					id: item.id,
					merchantId: this.queryData.merchantId,
					relegationValidPeriod: item.relegationValidPeriod,
					relegationWater: item.relegationWater,
					totalDeposit: item.totalDeposit,
					// vipGradeName: item.vipGradeName,
					tatalValidWater: item.tatalValidWater
				}
			})

			this.$api
				.memberVipGradeUpDateAPI({
					listUpdateMemberVipGradeReqDto
				})
				.then(() => {
					this.loading = false
					this.$message({
						message: this.$t('common.save_success'),
						type: 'success'
					})
					this.loadData()
				})
				.catch(() => {
					this.loading = false
				})
		},
		resetLastSaveData() {
			this.$api
				.memberVipSelectLastVPI({
					merchantId: this.queryData.merchantId
				})
				.then((res) => {
					this.dataList = res?.data || []
					this.$message({
						message: this.$t('member.reset_succeeded'),
						type: 'success'
					})
				})
				.catch(() => {})
		},
		openImgSettingDailog() {
			if (!this.dataList.length) {
				return this.$message.warning(
					this.$t('member.please_inquire_first')
				)
			}
			this.vipImgSettingVisible = true
		},
		openimgPreviewDialog(rowData) {
			this.imgPreviewDialog.levelImgUrl = rowData.imageAddress
			this.imgPreviewDialog.vipSerialNum = rowData.vipSerialNum
			this.imgPreviewDialog.levelImgDetailUrl = rowData.imageDetailAddress
			this.imgPreviewDialog.visible = true
		},
		openImgEditDialog(rowData) {
			this.$set(this.imgEditDialog, 'vipSerialNum', rowData.vipSerialNum)
			this.$set(
				this.imgEditDialog,
				'imageDetailAddress',
				rowData.imageDetailAddress
			)
			this.$set(this.imgEditDialog, 'imageAddress', rowData.imageAddress)
			this.$set(this.imgEditDialog, 'id', rowData.id)
			this.imgEditDialog.visible = true

			// this.$nextTick(() => {
			// 	this.imgEditDialog.id = rowData.id
			// 	this.imgEditDialog.vipSerialNum = rowData.vipSerialNum
			// 	this.imgEditDialog.imageAddress = rowData.imageAddress
			// 	this.imgEditDialog.imageDetailAddress = rowData.imageDetailAddress
			// })
		},
		handleImgEdit() {
			this.$refs.imgEditFormRef.validate((valid) => {
				if (valid) {
					this.$api
						.memberVipGradeUpdateIcon(this.imgEditDialog)
						.then(() => {
							this.$message.success(
								this.$t('common.action_success')
							)
							this.pageNum = 1
							this.loadData()
							this.imgEditDialog.visible = false
							// this.vipImgSettingVisible = false
						})
						.catch(() => {})
				}
			})
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }, key) {
			this.imgEditDialog[key] = file.imgUrl
		},
		handleUploadDefeat(key) {
			this.imgEditDialog[key] = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload(key) {
			this.imgEditDialog[key] = ''
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
.img-preview-dailog {
	.img-preview-content {
		padding: 0 30px;
	}
	.img-item {
		display: flex;
		&:first-child {
			margin-bottom: 50px;
		}
		.el-image {
			width: 200px;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
				rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
		}
	}
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

.btn_footer {
	text-align: center;
	margin-top: 50px;
}
</style>
